<template>
    <view>
        <div style="background: white; padding: 20px; font-size: 18px;">
            <div style="line-height: 1.5;">物流公司：{{urlParams.logisticsCompanyName}}</div>
            <div style="line-height: 1.5;">物流单号：{{urlParams.logisticsNo}}</div>
        </div>
        <div style="padding: 0 20px;">
            <div style="line-height: 2; font-size: 18px;">物流轨迹：
                <label v-if="!steps.length">{{urlParams.tbLogisticsTracesText}}</label>
            </div>
            <u-time-line node-top="2" v-if="steps.length">
                <u-time-line-item v-for="(item, index) of steps" :key="index">
                    <div slot="node">
                        <view class="u-node" :style="{'background': index === 0 ? '#19be6b': '#d0d0d0'}"></view>
                    </div>
                    <div slot="content">
                        <view>
                            <view class="u-order-title">{{item.text}}</view>
                            <view class="u-order-desc"></view>
                            <view class="u-order-time">{{item.time}}</view>
                        </view>
                    </div>
                </u-time-line-item>
            </u-time-line>
        </div>
    </view>
</template>

<script>

    export default {
        data() {
            return {
                steps: []
            }
        },
        onReady() {
            const _self = this;
            // 物流轨迹
            if (this.objParams.content) {
                let traces = JSON.parse(this.objParams.content).Traces;
                traces = traces.reverse();
                traces.forEach((item, index) => {
                    _self.steps.push({
                        text: item.AcceptStation,
                        time: item.AcceptTime
                    });
                });
            }
        },
        methods: {}
    }
</script>

<style lang="scss" scoped>
    @import "./index.scss";
</style>
